<template>
    <div class="track-container">
        <div class="filter-box">
            <div class="filter-left">
                <el-input v-model="condition.value"
                          size="mini"
                          placeholder="请输入栅栏名称"></el-input>
                <el-button type="primary"
                           size="mini"
                           :loading="loading"
                           @click="onSearch"
                           style="margin:0 12px;"><i class="el-icon-search"></i>查询
                </el-button>
                <el-button type="primary"
                           size="mini"
                           @click="onReset()"
                           style="margin:0;"><i class="el-icon-refresh"></i>重置
                </el-button>
            </div>
            <div class="filter-right">
                <el-button type="primary"
                           size="mini"
                           icon="el-icon-plus"
                           @click="handleOpenAddDialog">添加
                </el-button>
                <el-button type="primary"
                           size="mini"
                           icon="el-icon-delete"
                           @click="handDeleteAll">删除
                </el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table v-loading="loading"
                  stripe
                  element-loading-text="加载中"
                  element-loading-spinner="el-icon-loading"
                  height="100%"
                  :data="tableData"
                  @selection-change="handleChangeSelect">
            <el-table-column type="selection"
                             width="55"
                             fixed="left"></el-table-column>
            <el-table-column label="栅栏名称"
                             prop="name"
                             show-overflow-tooltip></el-table-column>
            <el-table-column label="栅栏颜色"
                             prop="colour"
                             show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-color-picker v-model="scope.row.colour"
                                     disabled></el-color-picker>
                </template>
            </el-table-column>
            <el-table-column label="栅栏类型"
                             prop="allow"
                             show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.allow ? '禁入' : '禁出' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="栅栏显示"
                             prop="enable"
                             show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.enable ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="栅栏名称显示"
                             prop="titleShow"
                             show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{ scope.row.titleShow ? '是' : '否' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             fixed="right"
                             align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item"
                                effect="dark"
                                content="编辑栅栏"
                                placement="bottom-start">
                        <el-button type="danger"
                                   size="mini"
                                   icon="el-icon-edit"
                                   @click="handleOpenUpdateDialog(scope.row)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="page-block">
            <el-pagination @current-change="handleCurrentChange"
                           :current-page="pageNo"
                           :page-size="pageSize"
                           layout="total, prev, pager, next, jumper"
                           :total="total">
            </el-pagination>
        </div>
        <!-- 添加/编辑标签  -->
        <el-dialog v-el-drag-dialog
                   custom-class="custom-dialog"
                   :visible.sync="dialog"
                   title="栅栏设置"
                   width="850px "
                   append-to-body>
            <div style="height:700px">
                <Item v-if="dialog"
                      :current-item="currentItem"
                      @create="emitCreate"
                      @update="emitUpdate"
                      @close="dialog = false" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Item from './item'
import request from '@/api/fence'
import { colorOptions } from '@/common'

export default {
    components: { Item },
    filters: {
        filterColour(val) {
            return colorOptions.filter(item => item.value === val).length ? colorOptions.filter(item => item.value === val)[0].label : val
        }
    },
    data() {
        return {
            condition: {
                value: ''
            },
            postOptions: [],
            selectOptions: [],
            tableData: [],
            loading: false,
            pageSize: 10,
            pageNo: 1,
            total: 0,
            dialog: false,
            currentItem: {}
        }
    },
    created() {
        this.initData()
    },
    methods: {
        initData() {
            this.loading = true
            let { pageNo, pageSize } = this
            request.page({ pageNo, pageSize, ...this.condition }).then(res => {
                this.loading = false
                if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                this.tableData = res.obj.records
                this.total = res.obj.total
            })
        },
        onSearch() {
            this.pageNo = 1
            this.initData()
        },
        onReset() {
            for (let key in this.condition) {
                this.condition[key] = ''
            }
        },
        handleChangeSelect(options) {
            this.selectOptions = options
        },
        handleOpenAddDialog() {
            this.currentItem = {}
            this.dialog = true
        },
        // 删除
        handDeleteAll() {
            if (!this.selectOptions.length) return this.$msgPrompt.warning()
            this.$confirm(this.$confirmMsg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$startLoading()
                request.delete(this.selectOptions.map(i => i.id)).then(res => {
                    this.$endLoading()
                    if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                    this.$msgPrompt.success()
                    this.onSearch()
                })
            })
                .catch(() => {
                    this.$msgPrompt.info()
                })
        },
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
            this.initData()
        },
        handleOpenUpdateDialog(row) {
            this.currentItem = row
            this.dialog = true
        },
        // 弹窗事件
        emitCreate(data) {
            this.$startLoading()
            request.add(data).then(res => {
                this.$endLoading()
                if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
                this.dialog = false
                this.onSearch()
            })
        },
        emitUpdate(data) {
            this.$startLoading()
            request.update(data).then(res => {
                this.$endLoading()
                if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                this.$msgPrompt.success()
                this.dialog = false
                this.initData()
            })
        }

    }
}
</script>
<style lang='scss' scoped>
</style>
